/**
 * Created by JLB1 on 2017/1/20.
 */
import React, { Component, PropTypes } from 'react'
import ReactDOM from "react-dom"
import AJAX from "../../lib/ajax";
import wx from 'wx';
import { addErrorListener } from "../../lib/handleError"
import Tools from "../../lib/tools.js"

import Toast from '../MyPackage/components/Toast'
require('../../lib/rem');
require('../../styles/common.less');
require('../../styles/lux.less');
require('../../styles/resetWeui.less');
require('./SuggestionAdd.less');
require('../../lib/jquery.form.js');
import weixinShare from '../../lib/weixinShare';
import weui from 'weui.js';

class SuggestionAdd extends Component {
	constructor(props) {
		super(props);
		this.state = {
			feedback_value: '',//回复内容
			imgSrc: '',//回复图片
			isOverflow: false,//是否超出字数限制
			imgsize: 0,
			fileList: null,

			picList: [],
		};

		this.handlevalue = this.handlevalue.bind(this);
		this.handleImg = this.handleImg.bind(this);
		this.uploadImg = this.uploadImg.bind(this)
	}

	componentWillMount() {
		addErrorListener()()
		weixinShare.hideAll()
		AJAX.request("get_signature", {
			full_url: window.location.href
		}, (data) => {
			wx.config({
				//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.body.appid, // 必填，公众号的唯一标识
				timestamp: data.body.timestamp, // 必填，生成签名的时间戳
				nonceStr: data.body.noncestr, // 必填，生成签名的随机串
				signature: data.body.signature,// 必填，签名，见附录1
				jsApiList: ["chooseImage", "uploadImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			})

		})
	}

	componentDidMount() {
		AJAX.appendBaiduAnalysis()
	}

	handlevalue(e) {
		if (this.state.feedback_value.length >= 400) {
			this.setState({
				isOverflow: true
			})
		}
		this.setState({
			feedback_value: e.target.value.replace(/\ud83d[\udc00-\ude4f\ude80-\udfff]/g, '')
		})
	}

	//选择图片
	handleImg() {
		const _this = this;
		wx.ready(() => {
			wx.chooseImage({
				count: 1, // 默认9
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function (res) {
					var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
					_this.setState({
						imgSrc: localIds[0]
					})
				}
			})
		})
	}

	uploadImg() {
		const _this = this;
		let isSend = true;
		if (!isSend) {
			return
		}
		if (this.state.feedback_value.length <= 0 || this.state.feedback_value.length > 400) {
			Toast.warn({
				content: '请输入1-400字'
			});
			return
		}
		isSend = false;
		if (this.state.imgSrc) {
			wx.ready(() => {
				wx.uploadImage({
					localId: this.state.imgSrc, // 需要上传的图片的本地ID，由chooseImage接口获得
					isShowProgressTips: 1, // 默认为1，显示进度提示
					success: function (res) {
						// alert('上传成功')
						var serverId = res.serverId; // 返回图片的服务器端ID
						AJAX.request("feedback_create", { content: _this.state.feedback_value, img: serverId }, (data) => {
							if (data.code === 0) {
								location.href = './Suggestions'
							} else {
								isSend = true
							}
						})
					},
					fail: function () {
						isSend = true
					}
				});
			})
		} else {
			AJAX.request("feedback_create", { content: _this.state.feedback_value }, (data) => {
				if (data.code === 0) {
					location.href = './Suggestions'
				} else {
					isSend = true
				}
			})
		}
	}

	render() {
		const { imgSrc } = this.state;
		return (
			<div className="feedbackAdd">
				<div className="feedbackAdd_main">
					<div className="feedbackAdd_box">
						<div className="feedbackAdd_item">
							<h4 className="item_title">请输入给我们的建议</h4>
							<div className="item_content">
								<textarea
									className="item_textarea"
									onChange={this.handlevalue}
									id="hehe"
									value={this.state.feedback_value}
									placeholder="您反馈的每一个字都是我们成长的动力!"
								/>
								<div className="item_count">{this.state.feedback_value.length}/400</div>
							</div>
						</div>
						<div className="feedbackAdd_item">
							<h4 className="item_title">反馈附图</h4>
							<div className="item_fileList">
								{imgSrc && <div className="item_file"><img src={imgSrc} alt="" /></div>}
								<div className="item_file addImgBtn" onClick={this.handleImg}>
									<img src="https://cdn2.jinlb.cn/pic/10/a5/10a5d769ad7845960300dfc3ab3b73eb.png" />
								</div>
							</div>
						</div>
					</div>
				</div>

				<div className="feedbackAdd_btn">
					<button onClick={this.uploadImg}>发送</button>
				</div>
			</div>
		)
	}
}
ReactDOM.render(<SuggestionAdd />, document.getElementById('app'));
if (module.hot) {
	module.hot.accept();
}

